<template>
    <div>
      <el-row class="lock-btn" style='margin-top:10px'>
        
        <el-input v-model="queryParams.userId" style="width:250px;float: left;margin-left:5px;" clearable placeholder="请输入手机号"></el-input>
        <el-input v-model="queryParams.mac" style="width:250px;float: left;margin-left:5px;" clearable placeholder="请输入mac"></el-input>
  
        <el-button-group style="margin-left:5px;">
          <el-button size="medium" type="primary" @click="queryBtn" round>搜索</el-button>
        </el-button-group>
      </el-row>
    
   
  
        <el-row>
        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <el-form ref="" v-if="showtag" style="position:relative;box-shadow: rgb(205 205 205) 1px 1px 8px;background:#ffffff; text-align: left;border-radius: 10px;margin-top:20px;margin-left: 10px;padding:20px;width:402px;height:470px;">
           
           <span style="font-size:16px;position: absolute;left: 30px;font-weight: 600;color:#409EFF;top:50px">末次预约详情</span>
           <!-- <div style="border-top:1px solid #d5d5d5;margin-top:40px;"></div> -->
          <div style="position: absolute;top:110px;">
            <div style="border-top:1px solid #d5d5d5;width: 400px;"></div><br/>
           <span class="flag">用户ID：</span><span>{{getMyBook1.openId}}</span><br/><br/>
           <div style="border-top:1px solid #d5d5d5;width: 400px;"></div><br/>
           <span class="flag">预约位置：</span><span >{{getMyBook1.address}}</span><br/><br/><br/>
           <div style="border-top:1px solid #d5d5d5;width: 400px;"></div><br/>
           <span  class="flag">预约场站名称：</span><span>{{getMyBook1.parkfieldName}}</span><br/><br/><br/>
           <div style="border-top:1px solid #d5d5d5;width: 400px;"></div><br/>
           <span  class="flag">预约开始时间：</span><span>{{getMyBook1.startTime}}</span><br/><br/><br/>
           <div style="border-top:1px solid #d5d5d5;width: 400px;"></div><br/>
           <span  class="flag">预约结束时间：</span><span>{{getMyBook1.endTime}}</span><br/><br/>
           
        </div>
          </el-form>    
        </el-col>

        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <el-form ref="" v-if="showtag" style="position:relative;box-shadow: rgb(205 205 205) 1px 1px 8px;background:#ffffff; text-align: left;border-radius: 10px;margin-top:20px;margin-left: 10px;padding:20px;width:402px;height:470px;">
           
           <span style="font-size:16px;position: absolute;left: 30px;font-weight: 600;color:#409EFF;top:50px">末次预约详情</span>
           <!-- <div style="border-top:1px solid #d5d5d5;margin-top:40px;"></div> -->
          <div style="position: absolute;top:110px;">
            <div style="border-top:1px solid #d5d5d5;width: 400px;"></div><br/>
           <span class="flag">用户ID：</span><span>{{getMyBook2.openId}}</span><br/><br/>
           <div style="border-top:1px solid #d5d5d5;width: 400px;"></div><br/>
           <span class="flag">预约位置：</span><span >{{getMyBook2.address}}</span><br/><br/><br/>
           <div style="border-top:1px solid #d5d5d5;width: 400px;"></div><br/>
           <span  class="flag">预约场站名称：</span><span>{{getMyBook2.parkfieldName}}</span><br/><br/><br/>
           <div style="border-top:1px solid #d5d5d5;width: 400px;"></div><br/>
           <span  class="flag">预约开始时间：</span><span>{{getMyBook2.startTime}}</span><br/><br/><br/>
           <div style="border-top:1px solid #d5d5d5;width: 400px;"></div><br/>
           <span  class="flag">预约结束时间：</span><span>{{getMyBook2.endTime}}</span><br/><br/>
           
        </div>
          </el-form>    
        </el-col>

        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <el-form ref="" v-if="showtag" style="position:relative;box-shadow: rgb(205 205 205) 1px 1px 8px;background:#ffffff; text-align: left;border-radius: 10px;margin-top:20px;margin-left: 10px;padding:20px;width:402px;height:470px;">
           
           <span style="font-size:16px;position: absolute;left: 30px;font-weight: 600;color:#409EFF;top:50px">末次预约详情</span>
           <!-- <div style="border-top:1px solid #d5d5d5;margin-top:40px;"></div> -->
          <div style="position: absolute;top:110px;">
            <div style="border-top:1px solid #d5d5d5;width: 400px;"></div><br/>
           <span class="flag">用户ID：</span><span>{{getMyBook3.openId}}</span><br/><br/>
           <div style="border-top:1px solid #d5d5d5;width: 400px;"></div><br/>
           <span class="flag">预约位置：</span><span >{{getMyBook3.address}}</span><br/><br/><br/>
           <div style="border-top:1px solid #d5d5d5;width: 400px;"></div><br/>
           <span  class="flag">预约场站名称：</span><span>{{getMyBook3.parkfieldName}}</span><br/><br/><br/>
           <div style="border-top:1px solid #d5d5d5;width: 400px;"></div><br/>
           <span  class="flag">预约开始时间：</span><span>{{getMyBook3.startTime}}</span><br/><br/><br/>
           <div style="border-top:1px solid #d5d5d5;width: 400px;"></div><br/>
           <span  class="flag">预约结束时间：</span><span>{{getMyBook3.endTime}}</span><br/><br/>
           
        </div>
          </el-form>    
        </el-col>
       </el-row>   
           
  
  </div>
  </template>
  
  <script>
   
  import { getNickName, getTestUserName,getRoleCode} from "../../util/auth";
  import {getMyBookByphoneApi} from '../../api/lockManager';
  
  export default {
    name: "lcredepositrequest",
    data: function () {
      return {
        clientHeight:
          Math.max(
            document.documentElement.scrollHeight,
            document.body.scrollHeight
          ) -
          132 -
          5 +
          10 -
          28,
        labelWidth: "130px",
        loading: false,
        getMyBook1:{
            openId:'',
            address:'',
            parkfieldName:'',
            startTime:'',
            endTime:''
        },
         getMyBook2:{
            openId:'',
            address:'',
            parkfieldName:'',
            startTime:'',
            endTime:''
        },
        getMyBook3:{
            openId:'',
            address:'',
            parkfieldName:'',
            startTime:'',
            endTime:''
        },
        showtag:true,
        queryParams:{userId:'',
        mac:''
      },
      };
    },
    methods: {
       
      queryBtn () {
        let _this = this;
  
        if((_this.queryParams.userId != null && _this.queryParams.userId != undefined && _this.queryParams.userId != '') ||
        (_this.queryParams.mac != null && _this.queryParams.mac != undefined && _this.queryParams.mac != ''))
        {
          // if(_this.queryParams.userId == ''){_this.queryParams.userId = '""'}
          // if(_this.queryParams.mac == ''){_this.queryParams.mac = '""'}
            getMyBookByphoneApi({phone:_this.queryParams.userId.replace(/\s*/g, ""),mac:_this.queryParams.mac}).then(resp => {     
            if(resp.errmsg == 'ok'){
                console.log("888")
                if(resp.data[0] != null || resp.data[1] != null || resp.data[2] != null){
                    
                    if(resp.data[0] != null){
                    _this.getMyBook1.openId = resp.data[0].openId
                    _this.getMyBook1.address = resp.data[0].address
                    _this.getMyBook1.parkfieldName = resp.data[0].parkfieldName
                    _this.getMyBook1.startTime = resp.data[0].startTime
                    _this.getMyBook1.endTime = resp.data[0].endTime  
                    }
                    if(resp.data[1] != null){
                    _this.getMyBook2.openId = resp.data[1].openId
                    _this.getMyBook2.address = resp.data[1].address
                    _this.getMyBook2.parkfieldName = resp.data[1].parkfieldName
                    _this.getMyBook2.startTime = resp.data[1].startTime
                    _this.getMyBook2.endTime = resp.data[1].endTime  
                    }
                    if(resp.data[2] != null){
                    _this.getMyBook3.openId = resp.data[2].openId
                    _this.getMyBook3.address = resp.data[2].address
                    _this.getMyBook3.parkfieldName = resp.data[2].parkfieldName
                    _this.getMyBook3.startTime = resp.data[2].startTime
                    _this.getMyBook3.endTime = resp.data[2].endTime  
                    }

                }else{
                    alert("该用户没有预约信息!")

                }
  
            }
        })
        .catch(e => {
            if(e.errmsg == 'user.not.exists'){
                alert("用户不存在,请重新输入!")
            }
                     
        });
      }else{
        alert("请输入手机号或mac")
      }
      }
    },
    computed: {
      userState () {
        return getNickName() === getTestUserName();
      }
    },
    mounted: function () {

        this.roleCode = getRoleCode()
        // console.log("99999999999",getRoleCode()) 
    }
  };
  </script>
  
  <style scoped>
  .page-tool {
    background:#dfeaf9;
  }
  
  .page-tool div {
    text-align: right;
  }
  .flag{
    color:#ff770f;
    font-weight:600;
    font-size:16px;
    margin-left: 0px;
    line-height: 32px;
    text-align: center;
  }
  .lock-btn {
    margin-bottom: 5px;
    margin-top: -10px;
  }
  .operateBtn {
    font-size: 18px;
    width: 32px;
    height: 32px;
    padding: 0;
  }
  </style>